<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no,maximum-scale=1">
    <title>单词排列-八卦太极</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 99vw;
            height: 99vw;
            margin: 20px auto;
            position: relative;
            box-sizing: border-box;
            /*background-color: #f5f2f0;*/
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
        }

        .item {
            /*width: 200px;*/
            /*height: 200px;*/
            box-sizing: border-box;
            /*border-radius: 50%;*/
            transform-origin: 50% 50%;
            display: flex;
            align-items: center;
            flex-direction: column;
            overflow: hidden;
            /*border: 1px solid #b3d4fc;*/
        }

        .bottom {
            transform: rotate(180deg);
        }

        .item:nth-child(1), .item:nth-child(3), .item:nth-child(7), .item:nth-child(9), .item:nth-child(5) {
            justify-content: center;
        }

        .item:nth-child(1), .item:nth-child(3), .item:nth-child(7), .item:nth-child(9) {
            padding-top: 50px;
        }

        .item:nth-child(5) {
            background-color: #b3d4fc;
            border-radius: 50%;
        }

        .item:nth-child(1) {
            transform: rotate(-45deg);
        }

        .item:nth-child(4) {
            transform: rotate(-90deg);
        }

        .item:nth-child(7) {
            transform: rotate(-135deg);
        }

        .item:nth-child(8) {
            transform: rotate(180deg);
        }

        .item:nth-child(9) {
            transform: rotate(135deg);
        }

        .item:nth-child(6) {
            transform: rotate(90deg);
        }

        .item:nth-child(3) {
            transform: rotate(45deg);
        }

        .arrow {
            /*width: 100px;*/
            /*height: 15px;*/
            position: relative;
            /*background-color: #795da3;*/
            background-image: url("../src/img/arrow.png");
            background-position: center center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-bottom: 10px;
        }

        .arrow-reverse {
            transform-origin: 50% 50%;
            transform: rotate(180deg);
        }


        #words {
            width: 100%;
            height: 150px;
        }

        #form {
            width: 100%;
            margin-top: 20vw;
            display: flex;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;
        }

        button {
            margin-top: 20px;
            width: 200px;
            height: 35px;
            font-size: 20px;
            background-color: #b3d4fc;
        }

        .taiji {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 1px solid #ccc;
            position: relative;
            animation: spin 6s linear infinite;
        }

        .tj {
            width: 50%;
            height: 100%;
            position: absolute;
            top: 0;
        }

        .white {
            background-color: #fff;
            left: 0;
            border-radius: 100% 0 0 100%/50% 0 0 50%;
        }

        .black {
            background-color: #000;
            right: 0;
            border-radius: 0 100% 100% 0/0 50% 50% 0;
        }

        .round {
            width: 50%;
            height: 50%;
            border-radius: 50%;
            position: absolute;
        }

        .r-w {
            background-color: #fff;
            top: 0;
            left: 25%;
        }

        .r-b {
            background-color: #000;
            bottom: 0;
            left: 25%;
        }

        .small {
            width: 25%;
            height: 25%;
            border-radius: 50%;
            position: absolute;
            left: 37.5%;
        }

        .s-b {
            background-color: black;
            top: 37.5%;
        }

        .s-w {
            background-color: white;
            margin-top: 37.5%;
        }

        @keyframes spin {
            0% {
                transform: rotateZ(0deg);
            }
            100% {
                transform: rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
<div id="form">
    <textarea id="words" placeholder="单词逗号或 . 隔开" >apple, banana, cat, dog, elephant, fish, grape, horse, ice cream, juice, kiwi, lemon, mango, orange, pear, queen, rabbit, strawberry</textarea>
    <button onclick="test()">提 交</button>
</div>
<div class="container" id="container">

</div>
<script>

    function createDoc(words) {
        let container = document.getElementById("container")
        // let wid
        let boxWidth = container.offsetWidth
        if (boxWidth > 600) {
            boxWidth = 600
        }
        container.style.width = boxWidth + "px"
        container.style.height = boxWidth + "px"
        let itemWidth = boxWidth / 3 - 1
        let arrowWidth = itemWidth / 2
        let arrowHeight = arrowWidth / 7
        // console.log("boxWidth = ", boxWidth)
        // console.log("itemWidth = ", itemWidth)
        let html = ''
        for (let i = 0; i < 9; i++) {
            let word1 = words[i * 2]
            let word2 = words[i * 2 + 1]
            if (i === 4) {
                html += `
<div class="item" style="width: ${itemWidth}px;height: ${itemWidth}px">
    <div class="taiji">
        <div class="tj white"></div>
        <div class="tj black"></div>
        <div class="round r-w">
            <div class="small s-b"></div>
        </div>
        <div class="round r-b">
            <div class="small s-w"></div>
        </div>
    </div>
</div>
`
            } else {
                html += `
    <div class="item" style="width: ${itemWidth}px;height: ${itemWidth}px">
        <div class="top">${word1}</div>
        <div class="arrow" style="width: ${arrowWidth}px;height: ${arrowHeight}px"></div>
        <div class="arrow arrow-reverse" style="width: ` + arrowWidth + `px;height: ` + arrowHeight + `px"></div>
        <div class="bottom">${word2}</div>
    </div>
`
            }
        }

        container.innerHTML = html
    }

    // let words = [
    //     "apple",
    //     "banana",
    //     "cat",
    //     "dog",
    //     "elephant",
    //     "fish",
    //     "grape",
    //     "horse",
    //     "ice cream",
    //     "juice",
    //     "kiwi",
    //     "lemon",
    //     "mango",
    //     "orange",
    //     "pear",
    //     "queen",
    //     "rabbit",
    //     "strawberry"
    // ];


    function test() {
        let words = document.getElementById("words").value
        words = words.replace(/，/g, '.')
        words = words.replace(/,/g, '.')
        let word_arr = words.split('.')
        // console.log("word_arr = ", word_arr)
        if (word_arr.length < 18) {
            alert("不足18个单词")
            return
        }
        document.getElementById('container').style.display = "flex"
        document.getElementById('form').style.display = "none"
        createDoc(word_arr)
    }

    test()
</script>
</body>
</html>